<style>
  @import './table.less';
</style>
<template>
  <div style="width: 100%">
    <Row :gutter="0" v-show="menuId !== -1">
        <Col :span="span1">
            <iview-button
              :menuId="menuId"
              v-on="{events:events}">
            </iview-button>
        </Col>
        <Col :span="span2">
          <Row :gutter="0">
            <Col span="18">
              <auto-complete
                      style="width: 100%"
                      ref="autoComplete"
                      :menuId="menuId"
                      :baseURL="baseURL"
                      :pageNumber="pageNumber"
                      :pageSize="pageSize"
                      :order="order"
                      :defaultFilters="defaultFilters"
                      :columns="columns"
                      v-on="{synchronize:synchronize}">
              </auto-complete>
            </Col>
            <Col span="6">
              <Button long type="info" size="large" @click="search">查询</Button>
            </Col>
          </Row>
        </Col>
    </Row>
    <Table style="width: 100%;margin-top: 5px" border ellipsis ref="selection" v-show="show" :loading="loading" :show-header="showHeader" :row-class-name="rowClassName" :columns="columns" :data="data" @on-selection-change="changeSelect" @on-select="onSelect" @on-select-cancel="cancelSelect" @on-row-dblclick="dblclick" @on-expand="expandRow"></Table>
  </div>
</template>

<script>
    import iviewButton from '@/view/common/button/Button.vue';
    import autoComplete from '@/view/common/autoComplete/AutoComplete.vue';
    export default {
      components: {
        iviewButton,
        autoComplete
      },
      props: {
        // 菜单主键
        menuId: {
          type: Number,
          default: -1
        },
        // 查询路径
        baseURL: {
          type: String,
          default: ''
        },
        // 页码
        pageNumber: {
          type: Number,
          default: 1
        },
        // 每页大小
        pageSize: {
          type: Number,
          default: 0
        },
        // 排序
        order: {
          type: String,
          default: 'id desc'
        },
        // 默认过滤条件
        defaultFilters: {
          type: Array,
          default: function () {
              return []
          }
        },
        // 列头是否显示
        showHeader: {
            type: Boolean,
            default: true
        },
        // 无数据时是否显示表格
        showTable: {
            type: Boolean,
            default: false
        },
        // 列表选中状态
        status: {
            type: Boolean,
            default: false
        },
        // 列表属性
        columns: {
            type: Array,
            default: function () {
                return []
            }
        },
        span1: {
            type: Number,
            default: 19
        },
        span2: {
            type: Number,
            default: 5
        },
        data: {
            type: Array,
            default: function () {
                return []
            }
        }
      },
      data () {
        return {
          show: true,
          loading: false,
          filters: [],
          // data: [],
          totalSize: 0,
          queryModel: {
            mode: 'and',
            pageNumber: this.pageNumber,
            pageSize: this.pageSize,
            order: this.order,
            defaultFilters: this.defaultFilters,
            filters: []
          },
          searchValue: ''
        }
      },
      watch: {
        // 表格选中状态
        status: function (val, oldVal) {
          this.$refs.selection.selectAll(false)
        },
        // 同步查询结果总数
        totalSize: function (val, oldVal) {
            this.$emit('changeTotalSize',val)
        },
        // 监听父组件页码变化
        pageNumber: function (val, oldVal) {
            this.queryModel.pageNumber = val
        },
        // 监听父组件每页条数变化
        pageSize: function (val, oldVal) {
            this.queryModel.pageSize = val
        }
      },
      methods: {
        // 定义同步父组件的操作
        synchronize (data, totalSize) {
          this.show = true
          if (this.showTable && data.length === 0) {
              this.show = false
          }
          this.data = data
          this.totalSize = totalSize
          // 返回查询结果集
          this.getData(this.data)
          // 同步选中数据
          this.changeSelect([])
        },
        search () {
            this.$refs.autoComplete.quickSearch()
        },
        // 外部刷新调用
        refresh () {
          this.$refs.autoComplete.search()
        },
        // 按钮事件
        events (item) {
          this.$emit('events',item)
        },
        // 行数据样式
        rowClassName (row, index) {
            if (index%2 === 0) {
                return 'demo-table-info-row';
            } else {
                return 'demo-table-error-row';
            }
            return '';
        },
        getData (data) {
            this.$emit('getData', data)
        },
        changeSelect (selection) {
          this.$emit('changeSelect', selection)
        },
        onSelect (selection, row) {
          this.$emit('onSelect', row)
        },
        cancelSelect (selection, row) {
          this.$emit('cancelSelect', row)
        },
        // 表格双击事件
        dblclick (row, index) {
          this.$emit('dblclick', row, index)
        },
        expandRow (row, status) {
          this.$emit('expandRow', row, status)
        },
        uncheck () {
            this.$refs.selection.selectAll(false)
        }
      },
      mounted () {
      }
    }
</script>

<style>
  /*.ivu-table .demo-table-info-row td{*/
      /*background-color: #e9eaec;*/
  /*}*/
  /*.ivu-table .demo-table-error-row td{*/
      /*background-color: #f8f8f9;*/
  /*}*/
  .ivu-table-tip{
    overflow-x: hidden;
    overflow-y: hidden;
  }
</style>
